
<template>
    <div class="w-810 h-300  flex flex-col">
        <div class="flex justify-between items-center">
            <div class="w-450 h-300 px-10 py-10 bg-white">
                <img class="w-full h-full rounded-md shadow-lg" :src="image" />
            </div>
            <ul class="flex flex-col py-16 items-center justify-around h-full">
                <li
                    class="w-72 bg-white text-blue-500"
                    v-for="(content, index) in contents"
                    :key="index.toString()"
                >{{ content }}</li>
            </ul>

        </div>

    </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
defineProps({
    image: {
        type: String
    },
    contents: {
        type: Array,
        default: []
    }
})




</script>
<style lang="scss" scoped>
li:before {
    content: "";
    width: 15px;
    height: 10px;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    top: -2px;
    border-left: 2px solid rgb(0, 174, 255);
    border-bottom: 2px solid rgb(0, 174, 255);

    transform: rotate(-45deg);
}
</style>